<template>
  <el-container>
    <el-header><cc-header></cc-header></el-header>
    <el-container>
      <el-aside :width="$store.state.asideMenu.width">
        <side-menu></side-menu>
      </el-aside>
      <el-main>
        <!-- 标签导航 -->
        <tag-list></tag-list>
        <!-- 业务主体 -->
        <router-view v-slot="{ Component }">
          <transition name="fade">
            <!-- 只允许缓存10个 -->
            <keep-alive :max="10">
              <component :is="Component"></component>
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import CcHeader from "./components/Header.vue";
import SideMenu from "./components/SideMenu.vue";
import TagList from "./components/TagList.vue";
import { initSysConfigs } from '~/utils/sysUtils'

initSysConfigs()
</script>
<style>
/* 从上面进入，向下面离开的动画效果
.fade-enter-from {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.fade-enter-to {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
} 
*/



.el-aside {
  transition: all 0.4s;
}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-active {
  transition-delay: 0.3s;
}
</style>
